<template>
  <div class="category-main">
    <div class="left">
      <div
        class="category-item"
        v-for="(item,index) in categoryAll"
        :key="item.id"
        @click="cutCategory(index,item.id)"
        :class="index==cuurIndex?'active':''"
      >{{item.name}}</div>
    </div>

    <div class="rigth-cont">
      <div class="rigth" v-if="categoryAll[cuurIndex]">
        <div>
          <img :src="categoryAll[cuurIndex].img.url" alt />
        </div>
        <div class="title">----&nbsp;&nbsp;{{categoryAll[cuurIndex].name}}&nbsp;&nbsp;----</div>
        <div class="product-list">
          <router-link
            tag="div"
            :to="{path:'/productd',query:{id:item.id}}"
            class="product-item"
            v-for="(item,index) in cuurProduct"
            :key="item.id"
          >
            <img :src="item.main_img_url" alt />
            <span>{{item.name}}</span>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryAll, getByCategory } from "@/api/category";
export default {
  name: "category",
  components: {},
  data() {
    return {
      categoryAll: [],
      cuurIndex: 0,
      product: {},
      cuurProduct: []
    };
  },
  created() {
    getCategoryAll().then(res => {
      this.categoryAll = res;
      this.getCuurProduct(res[0].id);
    });
  },
  methods: {
    getCuurProduct(id) {
      getByCategory(id).then(res => {
        this.cuurProduct = res;
        this.product[this.cuurIndex] = res;
      });
    },
    cutCategory(index, id) {
      /** 切换不同的分类
       *
       */
      this.cuurIndex = index;
      if (this.product[index]) {
        this.cuurProduct = this.product[index];
        return;
      }
      this.getCuurProduct(id);
    }
  }
};
</script>

<style lang="scss" scoped>
.category-main {
  @include s-y-h(2.5rem);
  display: flex;
  width: 100%;
  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    height: 100%;
    border-right: 1px solid #ccc;
    font-size: 0.7rem;
    .category-item {
      padding: 0.8rem;
      border-left: 3px solid #fff;
    }
    .active {
      border-left-color: #ab956d;
    }
  }
  .rigth-cont {
    width: 80%;
    overflow: hidden;
    overflow-y: scroll;
  }
  .rigth {
    margin: 0.8rem;

    .title {
      text-align: center;
      font-size: 0.7rem;
      color: #ab956d;
      margin: 0.8rem 0;
    }
    .product-list {
      display: flex;
      flex-flow: wrap;
      .product-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        img {
          width: 4rem;
          height: 4rem;
        }
        span {
          font-size: 0.6rem;
          text-align: center;
          line-height: 0.8rem;
        }
      }
    }
  }
}
</style>